import React, { useEffect, useState } from 'react'
import request from '../../request/request'
import { Table, Space, Button, Popconfirm, Form } from 'antd'
import Edit from './compoments/Edit'
import Ss from './compoments/Ss'
import { useSelector } from 'react-redux'
import { useLoaderData } from 'react-router-dom'
import Tab from './compoments/Tab'
function Home() {


    const Allbtn = useLoaderData()
    const addbtn = Allbtn.includes('add')
    const deletebtn = Allbtn.includes('delete')
    const Editbtn = Allbtn.includes('Edit')

    const [data, setData] = useState([])
    const [form] = Form.useForm()
    const tx = useSelector(state => state.setuse)




    const [name, setName] = useState('')
    const [job, setJob] = useState('')

    const getdata = async () => {
        const res = await request({ url: '/getSchemaList', method: 'get', params: { pageSize: 55, pageNum: 1, name, job } })
        const { code, list } = res.data
        console.log(res);

        if (code == 1) {
            setData(list)

        }
    }

    useEffect(() => {
        getdata()
    }, [name, job])


    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',

        },
        {
            title: '姓名',
            dataIndex: 'name',

        },
        {
            title: '职位',
            dataIndex: 'job',

        },
        {
            title: '公司地址',
            dataIndex: 'schema_name',

        },
        {
            title: '类型',
            dataIndex: 'type',

        },

        {
            title: '操作',
            key: 'action',
            render: (_, item) => (
                <Space size="middle">
                    {
                        Editbtn && <Button color="skblue" variant="solid" onClick={() => editfn(item)}>
                            编辑
                        </Button>
                    }

                    <Popconfirm
                        title="你确定要删除吗"

                        onConfirm={() => del(item.id)}

                    >
                        {
                            deletebtn && <Button color="red" variant="solid" >
                                删除
                            </Button>
                        }

                    </Popconfirm>
                </Space>
            ),
        },

    ];

    // 删除
    const del = async (id) => {
        const res = await request({ url: 'delSchema', method: 'delete', params: { id } })
        const { code } = res.data
        if (code == 1) {
            getdata()

        }

    }

    // 新增+编辑

    const [open, setOpen] = useState(false)
    const [titles, setTitles] = useState('')

    const addfn = () => {
        setOpen(true)
        setTitles('新增')
    }

    const editfn = (item) => {
        setOpen(true)
        setTitles('编辑')
        form.setFieldsValue(item)
    }

    const falsexx = () => {
        setOpen(false)
        form.resetFields()
    }

    const onsubmit = async (values) => {
        const res = await request({ url: '/editSchema', method: 'put', data: values })
        console.log('编辑', res);
        const { code } = res.data
        if (code == 1) {
            getdata()
            falsexx()

        }
        else {
            const res = await request({ url: '/addSchema', method: 'post', data: values })

            console.log('增', res);

            const { code } = res.data
            if (code == 1) {
                getdata()
                falsexx()

            }
        }

    }

    // 搜索
    let search = (values) => {
        setName(values.name)
        setJob(values.job)
    }

    const tc = () => {
        window.location.href = '/'
        localStorage.removeItem('token')
    }


    return (
        <div>
            <div style={{ display: 'flex' }}>
                <span>{tx.name}</span>
                <img style={{ width: '50px' }} src={tx.pic} alt="" />

                <Popconfirm
                    title="你确定要退出吗？"

                    onConfirm={() => { tc() }}

                >
                    <Button>退出</Button>
                </Popconfirm>
            </div>

            <Ss search={search}></Ss>
            {
                addbtn && <Button onClick={() => addfn()}>新增</Button>
            }

            <Tab columns={columns} data={data}></Tab>

            <Edit onsubmit={onsubmit} form={form} falsexx={falsexx} titles={titles} open={open}></Edit>

        </div>
    )
}

export default Home
